<script lang="ts">
  import { Search } from "lucide-svelte";

  interface Props {
    width?: string;
    placeholder: string;
    onSearch: (keyword: string) => void;
    onClear: () => void;
  }
  let props: Props = $props();

  let keyword = $state("");
</script>

<div class="relative">
  <button
    type="button"
    class="btn absolute right-0 top-[4px] z-50"
    disabled={keyword.trim() == ""}
    onclick={() => {
      if (keyword.trim() != "") {
        props.onSearch(keyword.trim());
      }
    }}
  >
    <Search size={20} />
  </button>
  <input
    class={`input ${props.width??""} rounded-none text bg-surface-100-900`}
    type="text"
    placeholder={props.placeholder}
    oninput={(e) => {
      keyword = e.currentTarget.value.trim();
      if (keyword == "") {
        props.onClear();
      }
    }}
    onchange={() => {
      if (keyword.trim() != "") {
        props.onSearch(keyword.trim());
      } else {
        props.onClear();
      }
    }}
  />
</div>
